<template>
  <div style="position: relative;">
    <div v-for="(item, index) in list" :key="index">
      <div style="border-bottom: #ccc .1rem solid;padding: 1rem 0;">
        <p class="downList-title">{{ item.title }}</p>
        <p class="downList-etitle">{{ item.eTitle }}</p>
        <div class="department-content">
          <span class="department">{{ item.department }}</span>
          <span class="sub">|</span>
          <span class="redspan">{{ item.num }}</span>
        </div>
        <div @click="onclickDown(index, item)">
          <i
            :class="
              clickDropDown == index
                ? 'theDropDownOperation down ifont icon-xialajiantouxiao ifont-size'
                : 'theDropDownOperation ifont icon-xialajiantouxiao ifont-size'
            "
          ></i>
        </div>
        <div v-show="clickDropDown == index">
          <p v-if="item.content" v-html="item.content" style="padding: 1rem;">
            {{ item.content }}
          </p>
          <p v-else class="text-null">暂无信息</p>
        </div>
      </div>
    </div>
    <div>
      <p style="padding: 1rem 0;">
        <span style="color: #005aaa;font-size: 1.2rem;">应聘流程及需知:</span>
        <br />
        <span style="color: #868686;">
          首先请留意上面的招聘信息是否有合适你的职位。详细阅读职位要求并向我们发送你的个人简历以及相关作品，我们将安排专人评审您的应聘邮件，通过对简历进行筛选进入以下流程》面试/复试》确认入职时间》报到》试用》入职
        </span>
        <br />
        <span style="font-weight: 600;"
          >薪金要求：请于邮件内写明或面议（试用期工资80%）。</span
        >
        <br />
        试用期：3个月
        <br />
        上班时间：周一至周五，早上8.30:00-12:00，下午13:30-18:00
        <br />
        有意者请发简历、作品和近照至 1277228281@qq.com合则约见
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: "DownList",
  props: {},
  data() {
    return {
      list: [
        {
          title: "资深文案",
          eTitle: "Senior Copywriter",
          department: "品牌策划部门",
          num: "2",
          content: `
					职位描述：<br />
					1、常森上班常森上班常森上<br />
					2、常森上班常森上班常森上<br />
					任职资格：<br />
					1、常森上班常森上班常森上班常森上班常森上班常森上班常森上班<br />
					2、常森上班常森上班常森上班常森上班常森上班常森上班常森上班<br />
					3、常森上班常森上班常森上班常森上班常森上班常森上班常森上班<br />
			简历请发至HR邮箱：126456@aa.com`
        },
        {
          title: "前端开发",
          eTitle: "Front-end Development",
          department: "品牌设计部",
          num: "2"
        },
        {
          title: "后端开发",
          eTitle: "Backend Development",
          department: "技术部门",
          num: "4",
          content: ``
        }
      ],
      clickDropDown: null
    };
  },
  methods: {
    onclickDown(index, item) {
      if (index == this.clickDropDown) {
        this.clickDropDown = null;
      } else {
        this.clickDropDown = index;
      }
    }
  }
};
</script>

<style scoped>
p {
  color: #434343;
  font-weight: 400;
}
.text-null {
  padding: 1rem;
  text-align: center;
  color: #ccc;
  font-size: 1rem;
}
.down {
  color: #005aaa;
  transform: rotate(180deg);
  -ms-transform: rotate(180deg); /* Internet Explorer */
  -moz-transform: rotate(180deg); /* Firefox */
  -webkit-transform: rotate(180deg); /* Safari 和 Chrome */
  -o-transform: rotate(180deg); /* Opera */
}
.theDropDownOperation {
  position: absolute;
  right: 0;
  margin-top: -3rem;
  transition: all 0.3s;
}
.ifont-size {
  font-size: 2.4rem;
  cursor: pointer;
}
.theDropDownOperation .department-content {
  padding: 0.2rem;
}
.department::before {
  content: "部门：";
  margin-left: 3px;
  font-weight: 400;
}
.sub {
  color: #ccc;
  margin: 0 0.5rem;
}
.redspan {
  color: #005aaa;
  font-weight: 400;
}
.redspan::before {
  content: "招聘人数：";
  font-weight: 400;
}
.redspan::after {
  content: "人";
}
.downList-title,
.downList-etitle {
  padding: 0.2rem;
  margin: 0;
}

.downList-title {
  color: #939393;
  font-size: 1.3rem;
}
.downList-etitle {
  color: #434343;
  font-family: "MyriadPro-Regular_0";
  font-size: 1.3rem;
}
</style>
